import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import { h0 } from '../../../common/fp';
import dayjs from 'dayjs';
import './DepartDate.css';

export default function DepartDate (props) {
	const { time, onClick } = props;

	const h0OfDepart = h0(time);
	const departDate = new Date(h0OfDepart);

	const departDateString = useMemo(() => {
		return dayjs(h0OfDepart).format('YYYY-MM-DD');
	}, [h0OfDepart]);

	const isToday = h0OfDepart === h0();

	const weekString =
		'周' +
		['日', '一', '二', '三', '四', '五', '六'][departDate.getDay()] +
		(isToday ? '(今天)' : '');

	return (
		<div className="depart-date" onClick={onClick}>
			<input type="hidden" name="date" value={departDateString} />
			{departDateString} <span className="depart-week">{weekString}</span>
		</div>
	)
}

DepartDate.propTypes = {
	time: PropTypes.number.isRequired,
	onClick: PropTypes.func.isRequired,
};